<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="center"
      :closeable="true"
      :safeAreaInsetBottom="false"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="title">{{ title }}</view>
        <view class="cdkey">
          <input v-model="$data.cdkPassword" placeholder="请输入兑换码" />
        </view>
        <view class="foot_box">
          <view class="btn btn_cancel" @tap="close"> 返回 </view>
          <view class="btn btn_save margin-left" @tap="onSave"> 兑换 </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import BasicConfig from "@/utils/config";
import errorCode from "../utils/http/errorCode";
import { getCdkCoupon } from "../api/Interface/coupons";
const $emit = defineEmits(["update:show", "close"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "请输入兑换码",
  },
});
const $data = reactive({
  cdkPassword: "", // 口令
});
const close = () => {
  $data.cdkPassword = "";
  $emit("update:show", false);
};
const open = () => {};
const onSave = () => {
  if (!$data.cdkPassword) {
    BasicConfig.toast("兑换码不能为空");
    return;
  }
  getCdkCoupon({ cdkPassword: $data.cdkPassword }).then((res) => {
    BasicConfig.toast(res.msg);
    if (res.code === errorCode.success) {
      close();
    }
  });
};
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 60rpx !important;
    height: 30vh;
  }
  .content {
    background: #ffffff;
    border-radius: 60rpx;
    width: 80vw;
    height: 30vh;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 36rpx;
      text-align: center;
    }
    .cdkey {
      input {
        border: none;
        text-align: center;
        font-size: 34rpx;
      }
    }
    .foot_box {
      padding-top: 0;
    }
  }
}
</style>
